import React from 'react'
import { Row, Col, Divider } from 'antd'
import { Switch, Route, NavLink } from 'react-router-dom'

import Layout from '../../components/Layout'
import ProductDetail from '../../components/ProductDetail'
import style from './index.scss'
import BannerImg from '../../assets/images/product/banner.jpg'

class Product extends React.Component{
    render() {

        const pdtCateObj = {
            0: "汉果商贸",
            1: "原野美妆",
            2: "零食商城",
            3: "中付钱柜",
            4: "优百汇商城",
            5: "傻二哈"
        }

        let pImgs = []
        for (let i = 0; i < 6; i++){
            pImgs.push({i,name:pdtCateObj[i]})
        }

        const { match } = this.props

        return (
            <Layout>
                <Switch>
                    <Route path={`${match.path}/:id`} component={ProductDetail} />
                    <Route path={match.path}>
                        <div>
                            <img className={style.banner__img} src={BannerImg} />
                        </div>
                        <Divider>案例展示</Divider>
                        <Row type="flex" className={style.pdts}>
                            {
                                pImgs.map((item, index) =>
                                    <Col className={style.pdts__col} xs={24} sm={12} md={8}>
                                        <NavLink to={`${match.url}/${index}`} key={index} className={style.pdt__a}>
                                            <img className={style.pdt__img} src={[require(`../../assets/images/product/list/p_${index}.jpg`)]} />
                                            <span className={style.pdt__name}>{item.name}</span>
                                        </NavLink>
                                    </Col>
                                )
                            }

                        </Row>
                    </Route>
                </Switch>

            </Layout>
        );
    }
}

export default Product
